<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./img/favicon.jpg" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/pay.css">
    <title>结算页</title>
    <style>
	
        #box {
            width: 450px;
            height: 230px;
            background-color: #fff;
            padding: 20px;
        }

        #box h1 {
            font-size: 20px;
            text-align: left;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }

        p {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        p input {
            box-sizing: border-box;
            height: 40px;
            border-radius: 6px;
            font-size: 18px;
            padding-left: 10px;
            color: #000;
            border: 1px solid rgb(225, 43, 43);
        }

        #my {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 0;
        }

        #my button {
            width: 30%;
            height: 30px;
            margin: 0 30px;
        }
    </style>
</head>

<body>
    <!-- 头部开始 -->
    <div id="header">
        <a href="./index.html">
            <img src="./img/community/logo.png" alt="">
        </a>
        <div class="right">
            <a href="./index.html">首页</a>
            <a href="./community.html">社区精选</a>
            <a href="./shop.html" class="active">得物商城</a>
            <a href="javascript:;">机构服务</a>
            <a href="./about.html">关于我们</a>
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- 导航开始 -->
    <div id="nav">
        <ul>
            <li><a href="#">AIR JORDAN</a></li>
            <li><a href="#">NIKE</a></li>
            <li><a href="#">ADIDAS</a></li>
            <li><a href="#">新百伦</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">二手鞋</a></li>
            <li><a href="#">二手衣物</a></li>
            <li class="user">
                <a href="#">登录</a>
                <a href="#">购物车</a>
            </li>
        </ul>
    </div>
    <!-- 导航结束 -->
    <div class="pay">
        <div class="title">
            <h3>结算页</h3>
        </div>
        <h3>填写并核对订单信息</h3>
        <main>
            <div class="content">
                <div class="goods-address">
                    <div class="title">
                        <h4>收货人信息</h4> <a href="javascript:;" id="addAddress"
                            onclick="document.getElementById('my').showModal()"><span>新增收货地址</span></a>
                    </div>
                    <div>
                        <div class="address"> <label class="active">杨先生</label> <span id="addr">杨先生 <span
                                    class="myAddress">河北 廊坊市 三河市
                                    燕郊经济技术开发区</span>
                                186****8852</span> </div>

                        <div class="remarks"> <span>得物自提</span> <span>抱歉，存在不支持自提的商品或该地址下没有可用的自提点</span> </div>
                    </div>
                </div>
                <div class="pay-way">
                    <div>
                        <h4>支付方式</h4>
                    </div>
                    <div> <span>货到付款</span> <span>在线支付</span> <a href=""><span>更多 》</span></a> </div>
                </div>
                <div class="detailed-list">
                    <div>
                        <h4>送货清单</h4>
                        <div> <a href="">价格说明</a> <a href="./car.html">返回修改购物车</a> </div>
                    </div>
                    <div class="list">
                        <div class="list-left">
                            <div class="title"> <span>配送方式</span> <a href=""><span><i
                                            class="iconfont icon-gaojingkongxin"></i>对应商品</span></a> </div>
                            <div> <span>随机快递</span> </div>
                            <div> <span>标准达：</span> <span>预计 1月6日[今天] 15:00-21:00 送达</span> </div>
                            <div>
                                <div> <input type="radio"> <span>退换无忧</span> <span>&yen;0.70</span> </div>
                                <div> <span>自签收后7天内退货，15天内换货，可享1次上门取件服务</span> <span>查看详情</span> </div>
                                <div> <span>总重量：</span> <span>0.55kg</span> </div>
                            </div>
                        </div>
                        <div class="list-right"> <span>已选商品</span>

                            <!-- <div class="item">
                                <img src="./img/shop/shoes/newshoes1.webp" alt="">
                                <div>
                                    <span>Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待</span>
                                </div>
                                <div>
                                    <span>$10899.00</span>
                                </div>
                                <span class="number"> x1 </span>
                                <span class="bold">有货</span>
                            </div> -->




                        </div>
                    </div>
                </div>
                <div class="invoice">
                    <div>
                        <h4>发票信息</h4> <span>开企业抬头发票须填写纳税人识别号，以免影响报销</span>
                    </div>
                    <div> <span>电子普通发票 </span> <span>个人</span> <span>商品明细</span> <a href=""><span>修改</span></a> </div>
                </div>
            </div>
        </main>
        <div class="price">
            <div> <span><span class="number">1 </span> 件商品，总商品金额：</span> <span class="totalPrice">$10899.00</span> </div>
            <div> <span>运费：</span> <span>$5.00</span> </div>
        </div>
        <div> <span>应付金额： <strong class="allTotalPrice"> $10899.00</strong></span> <span id="toAddress">寄送至：河北 廊坊市 三河市 燕郊经济技术开发区</span> </div> <span>
            <button class="submit" type="button">提交订单</button> </span>
    </div>

    <div id="footer">
        <p>上海识装信息科技有限公司</p>
        <p>Shanghai Shizhuang Information Technology Co., Ltd</p>
        <p>
            增值电信业务经营许可证 沪B2-20180281 |
            <a href="#" target="_blank" rel="noopener noreferrer">沪ICP备16019780号-9号 |</a>
            网络文化经营许可证 沪网文（2021）4421-366号 |
            <a href="#" target="_blank" rel="noopener noreferrer">沪公网安备31010902003239号</a>
            <img width="12" src="./img/footer/footer_small_img.png" alt="" class="jsx-42442502">
        </p>
        <p>
            医疗器械网络交易服务第三方平台备案:（沪）网械平台备字［2021］第00003号 | 互联网药品信息服务资格证书（沪）-经营性-2020-0212 | 网信算备310109033582302220017号
        </p>
        <p class="government-list">
            <a href="#" target="_blank" class="filings">廉政举报</a>
            <a href="#" target="_blank" class="filings">隐私政策</a>
            <a href="#" target="_blank" class="filings">使用条款</a>
            <a href="#" target="_blank" class="filings">知识产权</a>
            <a href="#" target="_blank" class="filings">加入我们</a>
            <a href="#" target="_blank" class="filings">自律声明</a>
        </p>
        <div class="iconBox">
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img1.webp" alt="" style="height: 32px; width: auto;">
            </a>
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img2.webp" alt="" style="height: 26px; width: auto;">
            </a>
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img3.webp" alt="" style="height: 26px; width: auto;">
            </a>
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img4.webp" alt="" style="height: 34px; width: auto;">
            </a>
        </div>
        <p>社区内容举报电话：400-891-9888（工作时间：8:00-22:00）021-63066366（工作时间：8:00-19:00）</p>
        <p>2016-2023 识装版权所有</p>
        <dialog id="my">
            <div id="box">
                <h1>添加收货地址</h1>
                <p>
                    <input type="text" id="theConsignee" placeholder="请输入收货人姓名">
                    <input type="text" id="theAddress" placeholder="请输入收货人地址">
                    <input type="text" id="thePhone" placeholder="请输入收货人手机号">
                    <span>
                        <!-- document.getElementById('my').close() -->
                        <button onclick="" id="add">添加</button>
                        <button onclick="document.getElementById('my').close()">取消</button>
                    </span>
                </p>
            </div>
        </dialog>
    </div>
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/json.js"></script>
    <script src="./layer-v3.5.1/layer/layer.js"></script>
    <script src="./js/pay.js"></script>
</body>

</html>